<template>
	<view v-for="(question, index) in questions" class="question-block">
		<text class="question-discription">第{{index + 1}}题：</text>
		<text class="question-discription">{{question.subjectName}}</text>
		<view class="image-content" v-if="question.subjectImage != ''">
		    <image style="width: 200px; height: 200px; background-color: #eeeeee;" :src="question.subjectImage"
		        @error="imageError"></image>
		</view>
		<view v-if="question.subjectType == '0'">
			<radio-group @change="handleRadioChange">
				<label class="radio">
					<radio value="A" />A: {{question.aDescribtion}}
				</label>
				<label class="radio">
					<radio value="B" />B: {{question.bDescribtion}}
				</label>
				<label class="radio">
					<radio value="C" />C: {{question.cDescribtion}}
				</label>
				<label class="radio">
					<radio value="D" />D: {{question.dDescribtion}}
				</label>
			</radio-group>
		</view>
		
		<view v-if="question.subjectType == '1'">
			<checkbox-group @change="handleCheckboxChange">
				<label class="radio">
					<checkbox value="A" />A: {{question.aDescribtion}}
				</label>
				<label class="radio">
					<checkbox value="B" />B: {{question.bDescribtion}}
				</label>
				<label class="radio">
					<checkbox value="C" />C: {{question.cDescribtion}}
				</label>
				<label class="radio">
					<checkbox value="D" />D: {{question.dDescribtion}}
				</label>
			</checkbox-group>
		</view>
		
		<view v-if="question.subjectType == '2'">
			<input class="uni-input" @input="onKeyInput" placeholder="请填空" />
		</view>
		
		<view v-if="question.subjectType == '3'">
			<radio-group @change="handleBoolenChange"> 
				<label class="radio" >
					<radio value="Y" :checked="subjectAnswer.value == 'Y'" />正确
				</label>
				<label class="radio">
					<radio value="N" :checked="subjectAnswer.value == 'N'" />错误
				</label>
			</radio-group>
			
		</view>
		<view v-if="question.subjectType == '4'">
			<input class="uni-input" @input="onKeyInput" placeholder="请填空" />
		</view>
		<button @click="nextQuestion(question, index)">提交</button>
	</view>
	<view class="finish-button">
		<button @click="finishExam()">结束考试</button>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	const paperId = ref(getApp().globalData.examPaperId);
	const token = ref(getApp().globalData.userToken);
	const inputValue = ref('')
	const selectValue = ref('')
	const subjectAnswer = ref('')
	const onKeyInput =(event) => {
        inputValue.value = event.target.value
    }
	const handleRadioChange = (event) =>{
		selectValue.value = event.detail.value
		console.log(selectValue.value)
	}	
	const handleBoolenChange = (event) =>{
		subjectAnswer.value = event.detail.value
		console.log(subjectAnswer.value)
	}
	const handleCheckboxChange = (event) =>{
		subjectAnswer.value = '';
		
		event.detail.value.sort().forEach( (item, index) =>{
			subjectAnswer.value += item;
		})
		console.log(subjectAnswer.value)
	}
	const questions = ref([])
	onMounted(() =>{
		console.log(paperId.value);
		uni.request({
		    url: 'http://localhost:11000/courseSystem/paper/doPaper',
		    method: 'GET',
		    header: {
		        'token': token.value
		    },
			data: {
		         'id' : paperId.value
		    },
		    success: (res) => {
		        console.log(res.data);
				questions.value = res.data.data;
		    }
		});
	})
	const imageError = (e) =>{
	    console.error('image发生error事件，携带值为' + e.detail.errMsg)
	}
	const nextQuestion = (question, index) =>{
		console.log(question)
		console.log(index)
		uni.request({
		    url: 'http://localhost:11000/courseSystem/paper/doPaper/' + index,
		    method: 'GET',
		    header: {
		        'token': token.value
		    },
			data: {
		        "id": question.id,
		        // "subjectName": question.subjectName,
		        // "subjectImage": question.subjectImage,
		        // "subjectType": question.subjectType,
				"subjectAnswer": selectValue.value,
		        // "subjectAnswer": subjectAnswer.value,
		        // "score": question.score,
		        // "aDescribtion": question.aDescribtion,
		        // "bDescribtion": question.bDescribtion,
		        // "cDescribtion": question.cDescribtion,
		        // "dDescribtion": question.dDescribtion,
		        // "doOrNoDo": question.doOrNoDo,
		    },
		    success: (res) => {
		        console.log(res.data);
		    }
		});
	}
	
		
	const finishExam = () =>{
		uni.request({
		    url: 'http://localhost:11000/courseSystem/paper/getScoreRetWithNoShortAnswer/' + getApp().globalData.teacherId + '/' + getApp().globalData.examPaperId,
		    method: 'GET',
		    header: {
		        'token': token.value
		    },
		    success: (res) => {
		        console.log(res.data);
				getApp().globalData.examResult = res.data.data;
				uni.navigateTo({
					url: '/pages/result/result'
				});
		    }
		});
	}
</script>

<style>
	.question-block{
		margin: 32rpx;
		border-bottom-style: solid;
		border-width: 1rpx;
	} 
	.question-discription{
		display: block;
	}
	.radio{
		display: block;
		margin: 12rpx;
	}
	.finish-button{
		margin-bottom:50rpx;
	}
</style>
